<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>商品页面</title>

    <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="../basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="../css/optstyle.css" rel="stylesheet"/>
    <link type="text/css" href="../css/style.css" rel="stylesheet"/>

    <script type="text/javascript" src="../basic/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="../basic/js/quick_links.js"></script>

    <script type="text/javascript" src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <script type="text/javascript" src="../js/jquery.imagezoom.min.js"></script>
    <script type="text/javascript" src="../js/jquery.flexslider.js"></script>
    <script type="text/javascript" src="../js/list.js"></script>
    <script type="text/javascript" src="js/vue/dist/vue.min.js"></script>
    <script type="text/javascript" src="js/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>

<body>
<div id="app">

    <!--顶部导航条 -->
    <div class="am-container header">
        <ul class="message-l">
            <div class="topMessage">
                <div class="menu-hd">
                    <a href="#" target="_top" class="h">亲，请登录</a>
                    <a href="#" target="_top">免费注册</a>
                </div>
            </div>
        </ul>
        <ul class="message-r">
            <div class="topMessage home">
                <div class="menu-hd"><a href="#" target="_top" class="h">商城首页</a></div>
            </div>
            <div class="topMessage my-shangcheng">
                <div class="menu-hd MyShangcheng"><a href="#" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
                </div>
            </div>
            <div class="topMessage mini-cart">
                <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                        class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                              class="h">0</strong></a>
                </div>
            </div>
            <div class="topMessage favorite">
                <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
                </div>
            </div>
        </ul>


        <!--悬浮搜索框-->

        <div class="nav white">
            <div class="logo"><img src="../images/logo.png"/></div>
            <div class="logoBig">
                <li><img src="../images/logobig.png"/></li>
            </div>
            <div class="search-bar pr">
                <a name="index_none_header_sysc" href="#"></a>
                <form>
                    <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
                           autocomplete="off">
                    <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
                </form>
            </div>
        </div>

        <div class="clear"></div>
        <b class="line"></b>
        <div class="listMain">

            <!--分类-->
            <div class="nav-table">
                <div class="long-title"><span class="all-goods">全部分类</span></div>
                <div class="nav-cont">
                    <ul>
                        <li class="index"><a href="#">首页</a></li>
                        <li class="qc"><a href="#">闪购</a></li>
                        <li class="qc"><a href="#">限时抢</a></li>
                        <li class="qc"><a href="#">团购</a></li>
                        <li class="qc last"><a href="#">大包装</a></li>
                    </ul>
                    <div class="nav-extra">
                        <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                        <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
                    </div>
                </div>
            </div>
            <ol class="am-breadcrumb am-breadcrumb-slash">
                <li><a href="#">首页</a></li>
                <li><a href="#">分类</a></li>
                <li class="am-active">内容</li>
            </ol>
            <script type="text/javascript">
                $(function () {
                });
                $(window).load(function () {
                    $('.flexslider').flexslider({
                        animation: "slide",
                        start: function (slider) {
                            $('body').removeClass('loading');
                        }
                    });
                });
            </script>
            <div class="scoll">
                <section class="slider">
                    <div class="flexslider">
                        <ul class="slides">
                            <li>
                                <img src="../images/01.jpg" title="pic"/>
                            </li>
                            <li>
                                <img src="../images/02.jpg"/>
                            </li>
                            <li>
                                <img src="../images/03.jpg"/>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>

            <!--放大镜-->

            <div class="item-inform">
                <div class="clearfixLeft" id="clearcontent">

                    <div class="box">
                        <script type="text/javascript">
                            $(document).ready(function () {
                                $(".jqzoom").imagezoom();
                                $("#thumblist li a").click(function () {
                                    $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
                                    $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
                                    $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
                                });
                            });
                        </script>

                        <div class="tb-booth tb-pic tb-s310">
                            <a href="#"><img src="fastDfsUrl+pet.resources.split(',')[1]" alt="细节展示放大镜特效"
                                                            rel="fastDfsUrl+pet.resources.split(',')[0]" class="jqzoom"/></a>
                        </div>
                        <ul class="tb-thumb" id="thumblist">
                            <li class="tb-selected">
                                <div class="tb-pic tb-s40">
                                    <a href="#"><img :src="fastDfsUrl+pet.resources.split(',')[0]"
                                                     mid="../images/01_mid.jpg" big="../images/01.jpg"></a>
                                </div>
                            </li>
                            <li>
                                <div class="tb-pic tb-s40">
                                    <a href="#"><img :src="fastDfsUrl+pet.resources.split(',')[1]"
                                                     mid="../images/02_mid.jpg" big="../images/02.jpg"></a>
                                </div>
                            </li>
                            <li>
                                <div class="tb-pic tb-s40">
                                    <a href="#"><img src="../images/03_small.jpg" mid="../images/03_mid.jpg"
                                                     big="../images/03.jpg"></a>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="clear"></div>
                </div>

                <div class="clearfixRight">

                    <!--规格属性-->
                    <!--名称-->
                    <div class="tb-detail-hd">
                        <h1>
                            {{pet.name}}
                        </h1>
                    </div>
                    <div class="tb-detail-list">
                        <!--价格-->
                        <div class="tb-detail-price">
                            <li class="price iteminfo_price">
                                <dt>促销价</dt>
                                <dd><em>¥</em><b class="sys_item_price">{{pet.saleprice}}</b></dd>
                            </li>
                            <li class="price iteminfo_mktprice">
                                <dt>原价</dt>
                                <dd><em>¥</em><b class="sys_item_mktprice">{{pet.costprice}}</b></dd>
                            </li>
                            <div class="clear"></div>
                        </div>

                        <!--地址-->
                        <div class="clear"></div>

                        <!--销量-->
                        <ul class="tm-ind-panel">
                            <li class="tm-ind-item tm-ind-sellCount canClick">
                                <div class="tm-indcon"><span class="tm-label">上架时间</span><span class="tm-count">{{pet.onsaletime}}</span>
                                </div>
                            </li>
                            <li class="tm-ind-item tm-ind-sumCount canClick">
                                <div class="tm-indcon"><span class="tm-label">累计销量</span><span
                                        class="tm-count">6015</span></div>
                            </li>
                            <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
                                <div class="tm-indcon"><span class="tm-label">累计评价</span><span
                                        class="tm-count">640</span></div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>

                    <div class="btn-op">
                        <div class="btn am-btn am-btn-warning">确认</div>
                        <div class="btn close am-btn am-btn-warning">取消</div>
                    </div>
                </div>
                <div class="theme-signin-right">
                    <div class="img-info">
                        <img src="../images/songzi.jpg"/>
                    </div>
                    <div class="text-info">
                        <span class="J_Price price-now">¥39.00</span>
                        <span id="" class="tb-hidden">库存<span class="stock">1000</span>件</span>
                    </div>
                </div>
            </div>

            </form>
        </div>
    </div>

    </dd>
    </dl>
    <div class="clear"></div>
</div>


</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            fastDfsUrl: 'http://121.37.194.36',
            pet: {}
        },
        methods: {},
        mounted() {
            //1.获取 url后面的参数 http://127.0.0.1/petDetail.html?id=16
            let param = getUrlParam(); //{id:16}
            //根据id查询数据
            this.$http.get("/pet/" + param.id).then(res => {
                this.pet = res.data;

            })
        }
    })
</script>
</html>